<template>
  <div id="order-detail">
    <c-title text="订单详情"></c-title>
    <div class="top-address-pane">
      <div class="flex-align">
          <van-image width="1.3438rem" height="1.3438rem" src="https://mini-app-img-1251768088.cos.ap-guangzhou.myqcloud.com/plugin/anytime_service/icon_local (1).png" />
        <div class="right-detail">
          <div class="name">{{ info.order_address && info.order_address.realname }}（{{ info.order_address &&
            info.order_address.mobile }}）</div>
          <div class="address-name">{{ info.order_address && info.order_address.address }}</div>
        </div>
      </div>
      <div style="display: flex; align-items: center;">
        <div>{{ info.distance }}{{ info.unit }}</div>
        <div style="margin-left: 1rem;" @click="goToAdress">
          <i style="color: #4978f8;" class="iconfont icon-zx_map_local"></i>
        </div>
      </div>
    </div>
    <div class="order-detail">
      <div class="order-sn">
        <span class="order-sn-color">订单号：{{ info.order_sn }}</span>
        <span class="order-sn-status">{{ info.status_name }}</span>
      </div>
      <div class="appointment-time" v-if="info.need_type == 1">
        <span class="time-name">预约时间</span>
        <van-icon name="star" class="star-icon" />
        <span class="ture-time">{{ info.start_time_str }}</span>
      </div>
      <div class="appointment-time" v-if="info.need_type == 0">
        <div>
          <span class="time-name">服务时长</span>
          <span class="ture-time">{{ info.start_time_str }}-{{ info.finish_time_str }}</span>
        </div>
        <div style="margin-top: 0.5rem;">
          <span class="time-name">信息有效时间</span>
          <span class="ture-time">{{ info.valid_time }}</span>
        </div>
      </div>

      <div class="tec-pane">
        <img :src="info.image_url" style="flex-shrink: 0;" />
        <div class="tec-right">
          <div class="tec-name">{{ info.title }}</div>
          <div class="tec-content">{{ info.content }}</div>
          <div class="service-charge">服务费 ￥{{ info.service_fee }}</div>
        </div>
      </div>
    </div>

    <div class="skill-master" v-if="type == 'area'">
      <img :src="info.has_one_shifu && info.has_one_shifu.personal_pic" />
      <div>
        <p style="font-size: 0.9rem; text-align: left;">{{ info.has_one_shifu && info.has_one_shifu.realname }}</p>
        <p style="color: #999; font-size: 0.8rem;">联系电话：{{ info.has_one_shifu && info.has_one_shifu.mobile }}</p>
      </div>
    </div>

    <div class="time-line" v-if="order_type !== 4">
      <template v-if="order_type == '1' || order_type == '5'">
        <div :class="index !== timeList.length - 1 ? 'time-box' : 'time-box time-box-border'"
          v-for="(item, index) in timeList" :key="index">
          <div class="spa-line">
            <span class="circle"></span>
            <span class="line" v-if="index !== timeList.length - 1"></span>
          </div>
          <div class="time-name">{{ item.name }}</div>
          <div class="true-time">{{ item.time }}</div>
        </div>
      </template>
      <template v-else-if="order_type == '2'">
        <div class="time-box time-box-border">
          <div class="spa-line">
            <span class="circle"></span>
          </div>
          <div class="time-name">接单时间</div>
          <div class="true-time">{{ info.accept_time }}</div>
        </div>
      </template>
      <template v-else-if="order_type == '3'">
        <div class="time-box time-box-border">
          <div class="spa-line">
            <span class="circle"></span>
          </div>
          <div class="time-name">取消时间</div>
          <div class="true-time">{{ info.close_time }}</div>
        </div>

      </template>
    </div>

    <!-- 已完成 并评价完 才显示 -->
    <div class="evaluation-detail"
      v-if="info.status == 3 && info.need_type == 0">
      <span>评价</span>
      <div style="display: flex;">
        <van-icon v-for="item in info.publish_comment&&info.publish_comment.star_grade" name="star" class="evaluation-star" :key="item" />
      </div>
    </div>

    <div class="bottom-bar" :class="{'isPcBtn': fun.isPc()}" v-if="type == 'individual' && (order_type == '4' || order_type == '1')">
      <!-- 待服务 -->
      <span v-if="order_type == '4'" class="mine-evaluation" @click="order_receiving">我要接单</span>
      <!-- 已完成 -->
      <span v-if="order_type == '1'" class="mine-evaluation" @click="evaluate_handle">我要评价</span>
    </div>


    <evaluation-popup :urlStr="urlStr" :evaluation_show.sync="evaluation_show" v-if="evaluation_show" :order_id="oid"
      @commentEvent="commentEvent"></evaluation-popup>
  </div>
</template>
<script>
import order_detail_controller from "./order_detail.js";

export default order_detail_controller;
</script>
<style lang="scss" rel="stylesheet/scss" scoped>
.isPcBtn {
  width: 375px !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
}

#order-detail {
  padding-bottom: 5rem;

  .skill-master {
    background: #fff;
    display: flex;
    justify-content: flex-start;
    margin-top: 0.625rem;
    padding: 0.75rem;

    img {
      width: 2.5rem;
      height: 2.5rem;
      border-radius: 1.25rem;
      margin: 0 0.3125rem 0 0;
    }
  }

  .flex-align {
    display: flex;
    align-items: center;
  }

  .top-address-pane {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: white;
    padding: 0.6rem;
    margin-top: 0.6rem;
    display: flex;
    align-items: center;

    .right-detail {
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      margin-left: 0.4rem;
      text-align: left;

      .name {
        font-size: 0.85rem;
        font-weight: 400;
        color: #333;
      }

      .address-name {
        margin-top: 0.5rem;
        font-size: 0.75rem;
        font-weight: 400;
        color: #999;
      }
    }
  }

  .order-detail {
    background: white;
    padding: 0.6rem;
    margin-top: 0.4rem;

    .order-sn {
      display: flex;
      justify-content: space-between;

      // 待接单 待审核
      .order-waite-color {
        color: #999 !important;
      }

      .order-service-color {
        color: #f84949 !important;
      }

      .order-sn-status {
        font-size: 0.65rem;
        font-weight: 400;
        color: #333;
      }

      .order-sn-color {
        font-size: 0.65rem;
        font-weight: 400;
        color: #999;
      }
    }

    .appointment-time {
      padding: 0.6rem 0.6rem 0.6rem 0;
      border-top: 0.025rem solid #e7e7e7;
      text-align: left;
      margin-top: 0.4rem;
      line-height: 1;

      .time-name {
        font-size: 0.75rem;
        font-weight: 400;
        color: #333;
      }

      .star-icon {
        color: #f84949;
        zoom: 0.5;
        vertical-align: super;
        margin-left: 0.1rem;
      }

      .ture-time {
        font-size: 0.75rem;
        font-weight: 400;
        color: #4978f8;
        margin-left: 0.4rem;
      }
    }

    .tec-pane {
      background: rgba(245, 245, 245, 0.39);
      border-radius: 0.2rem;
      padding: 0.6rem;
      display: flex;

      img {
        width: 3.6rem;
        height: 3.6rem;
        background: rgba(232, 232, 232, 0.39);
        border-radius: 0.2rem;
        margin: 0;
      }

      .tec-right {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        text-align: left;
        margin-left: 0.3rem;

        .tec-name {
          font-size: 0.75rem;
          font-weight: 400;
          color: #333;
        }

        .tec-content {
          font-size: 0.7rem;
          font-weight: 400;
          color: #999;
          // display: -webkit-box;
          // -webkit-box-orient: vertical;
          // -webkit-line-clamp: 1;
          // word-break: break-all;
          // overflow: hidden;
        }

        .service-charge {
          font-size: 0.65rem;
          font-weight: 400;
          color: #ff9c43;
        }
      }
    }

    .evaluation-pane {
      width: 100%;
      text-align: right;
      margin-top: 0.6rem;
      margin-bottom: 0.4rem;

      .evaluation-card {
        background: rgb(73, 120, 248);
        border-radius: 0.875rem;
        color: white;
        padding: 0.3rem 1rem;
      }
    }
  }

  .master-pane {
    background: white;
    padding: 0.6rem;
    margin-top: 0.6rem;
    display: flex;

    img {
      width: 2rem;
      height: 2rem;
      border-radius: 50%;
      margin: 0;
    }

    .right-detail {
      margin-left: 0.2rem;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      text-align: left;

      .master-name {
        font-size: 0.75rem;
        font-weight: bold;
        color: #333;
      }

      .master-mobile {
        font-size: 0.65rem;
        font-weight: 400;
        color: #999;
      }
    }
  }

  .enterprise-pane {
    background: white;
    padding: 0.6rem;
    margin-top: 0.4rem;

    .order-sn {
      display: flex;
      justify-content: space-between;

      // 待接单 待审核
      .order-waite-color {
        color: #999 !important;
      }

      .order-service-color {
        color: #f84949 !important;
      }

      .order-sn-status {
        font-size: 0.65rem;
        font-weight: 400;
        color: #333;
      }

      .order-sn-color {
        font-size: 0.65rem;
        font-weight: 400;
        color: #999;
      }
    }

    .enterprise-order {
      margin-bottom: 0.6rem;
    }

    .tec-pane {
      background: rgba(245, 245, 245, 0.39);
      border-radius: 0.2rem;
      padding: 0.6rem;
      display: flex;

      img {
        width: 3.6rem;
        height: 3.6rem;
        background: rgba(232, 232, 232, 0.39);
        border-radius: 0.2rem;
        margin: 0;
      }

      .tec-right {
        display: flex;
        flex-direction: column;
        text-align: left;
        margin-left: 0.3rem;

        .tec-name {
          font-size: 0.75rem;
          font-weight: 400;
          color: #333;
          line-height: 1.8rem;
          height: 1.8rem;
        }

        .tec-content {
          font-size: 0.75rem;
          font-weight: 400;
          color: #999;
        }
      }
    }

    .information-cost {
      display: flex;
      justify-content: space-between;

      .cost-name {
        font-size: 0.75rem;
        font-weight: 400;
        color: #333;
        margin-top: 0.6rem;
      }

      .cost-value {
        font-size: 0.75rem;
        font-weight: 400;
        color: #999;
        margin-top: 0.6rem;
      }

      .cost-total {
        color: #ff9c43 !important;
      }
    }
  }

  .time-line {
    padding: 0.6rem 0.6rem 0 1.6rem;
    background: white;
    margin-top: 0.6rem;

    .time-box-border {
      border-bottom: none !important;
    }

    .time-box {
      display: flex;
      flex-direction: column;
      border-bottom: 0.025rem solid #e7e7e7;
      margin-bottom: 0.6rem;

      .spa-line {
        position: relative;

        .circle {
          width: 0.5rem;
          height: 0.5rem;
          border-radius: 50%;
          border: 0.15rem solid #4978f8;
          display: block;
          position: absolute;
          left: -0.9rem;
          top: 0.3rem;
        }

        .line {
          width: 0.1rem;
          height: 3.2rem;
          display: block;
          background: rgba(73, 120, 248, 0.39);
          position: absolute;
          left: -0.7rem;
          top: 0.8rem;
        }
      }

      .time-name {
        font-size: 0.85rem;
        font-weight: 400;
        color: #333;
        text-align: left;
      }

      .true-time {
        font-size: 0.75rem;
        font-weight: 400;
        color: #999;
        padding: 0.3rem 0 0.7rem 0;
        text-align: left;
      }
    }
  }

  .evaluation-detail {
    padding: 0.6rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.85rem;
    font-weight: 400;
    color: #333;
    margin-top: 0.6rem;
    background: white;

    .evaluation-star {
      color: #ff9c43;
    }
  }

  .bottom-bar {
    display: flex;
    text-align: right;
    background: white;
    padding: 0.4rem 0.6rem;
    justify-content: flex-end;
    position: fixed;
    width: 100%;
    bottom: 0;

    .sure-line {
      background: rgb(73, 120, 248);
      border-radius: 1.025rem;
      padding: 0.325rem 1.475rem;
      color: white;
    }

    .mine-evaluation {
      background: rgb(73, 120, 248);
      border-radius: 1.025rem;
      padding: 0.325rem 0;
      width: inherit;
      color: white;
      text-align: center;
    }
  }
}
</style>
